
Page({
    data: {
        animation: null,
        n: 1,
        background: '#DDDDDD'
    },

    onShow () {
        this.initAnimation()
    },

    /** 初始化动画 */
    initAnimation () {
        // 创建动画
        this.animation = wx.createAnimation({
            duration: 400,
            timingFunction: 'linear',
        })
    },

    /** 点击旋转 */
    clickAnimation() {
        console.log(22222222222, this.data.n)
        this.data.background = this.data.background === '#DDDDDD' ? 'green' : '#DDDDDD'
        this.animation.rotate3d(0, 1, 0, 180 * this.data.n).step()
        this.animation.backgroundColor(this.data.background).step({ duration: 0 })
        this.data.n ++
        this.setData({
            animation: this.animation.export()
        })
    },

    /** 使用this.animation 实现 */
    clickAnimation1() {
        this.animate('#animation1', [
            { rotateY: 0, backgroundColor: '#DDDDDD'},
            { rotateY: 180, backgroundColor: 'green' },
            { rotateY: 360, backgroundColor: '#DDDDDD'},
            ], 400, function () {
              this.clearAnimation('animation1', {}, function () {
                console.log("清除了#container上的 opacity 和rotate属性")
              })
          }.bind(this))
    },

    /** 动画结束后触发 */
    handleEnd() {
        console.log('动画结束了')
    }
})
